<template>
  <view class="page">
    <!-- logo -->
    <!-- <view class="logo">
      <view class="logo_img">
        <image :src="ImgLogoGreen" mode="scaleToFill" />
      </view>
      <view class="logo_title">青芒果到家</view>
    </view> -->
    <!-- 搜索栏 -->
    <view class="search">
      <view class="search_box">
        <view class="flex align-center" @tap="onCheckAddress">
          <view class="icon_img">
            <image :src="ImgAddressGreen" />
          </view>
          <view class="margin-right-sm city_name u-line-1">
            {{ $data.cityName }}
          </view>
        </view>
        <view class="flex align-center" @tap="onCheckSearch">
          <view class="icon_img">
            <image :src="ImgSearchGray" />
          </view>
          <view class="margin-left-xs search_box--text u-line-1 text-gray">
            {{ $data.searchText }}
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="text-xl text-bold text-wrap">
      {{ $data.error }}
    </view> -->
    <!-- 金刚区 -->
    <view class="top_area">
      <view
        class="area_item"
        v-for="(item, index) of $data.topAreaList"
        :key="index"
        @tap="onCheckArea(item)"
      >
        <view class="area_item--img">
          <image :src="item._picurl" mode="widthFix" />
        </view>
        <view class="text-center area_item--name text-nowarp u-line-1-">
          {{ item.but_name }}
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="margin-top" v-if="$data.imgList.length">
      <up-swiper
        :list="$data.imgList"
        keyName="_picurl"
        height="260rpx"
        :radius="15"
        imgMode="scaleToFill"
        @click="onCheckImg"
      ></up-swiper>
    </view>
    <!-- 广告轮播图 -->
    <view class="margin-top" v-if="$data.adImgList.length">
      <up-swiper
        :list="$data.adImgList"
        keyName="_picurl"
        height="260rpx"
        :radius="15"
        imgMode="scaleToFill"
        @click="onCheckAdImg"
      ></up-swiper>
    </view>
    <!-- 服务列表 -->
    <view class="margin-tb text-xl text-bold"> 精选服务 </view>
    <ListPartService :list="$data.serviceList" />
    <!-- <button
		  open-type="getPhoneNumber"
		  @getphonenumber="getPhoneNumber"
		  class="btn u-reset-button"
		>
		  手机号一键登录
		</button> -->
    <PopupLogin />
  </view>
</template>

<script setup>
// 1.酒店订单下单时的预计服务时间 要展示 2.创建房间时 洗衣房 和 床单是否清洗选项去掉
import { getCurrentInstance, reactive, ref } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
  onTabItemTap,
} from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import {
  useGetLocationStorage,
  useGetTokenStorage,
  useGetUserStorage,
  useSetLocationStorage,
} from "../../hooks/useStorage";
import { getCustomBar } from "../../utils/utils";
import { getIndexDatas } from "../../api/Interface/home";
import {
  ImgAddressGreen,
  ImgSearchGray,
  ImgLogoGreen,
} from "../../utils/iconMap";
import {
  useGetFuzzyAddress,
  useGetLocationAddress,
} from "../../hooks/useLocation";
import ListPartService from "./components/ListPartService.vue";
import { useLogin, useWechatLogin } from "../../hooks/useLogin";
import { useClickArea, useClickSwiperImg } from "../../hooks/useCommon";
import PopupNewPeople from "../../components/PopupNewPeople.vue";
import { useImgSrc } from "../../hooks/useImg";
import errorCode from "../../utils/http/errorCode";
import { useTTPlugin } from "../../hooks/useTT";
import { eventBus } from "../../enums/eventBus";
import { isDev } from "../../utils/env";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const loadShow = ref(false);
const userInfo = useGetUserStorage();

const $data = reactive({
  top: "",
  imgList: [], // 轮播图
  adImgList: [], // 广告轮播图
  customBarHeight: "",
  searchText: "抽油烟机清洗", // 搜索栏显示内容
  cityName: "加载中...",
  topAreaList: [], // 顶部金刚区列表
  serviceList: [], // 服务列表
  LocationStorage: null, // 用户缓存的地市信息
  newShow: true, // 新人大礼包弹窗
  error: "加载页面",
});
const getPhoneNumber = async (e) => {
  console.log("getPhoneNumber", e);
};
const __init = async () => {
  console.log("首页1~~~~~~~~~~~");
  uni.hideLoading();
  uni.setNavigationBarTitle({
    title: "首页",
  });
  $data.LocationStorage = useGetLocationStorage() || {
    name: "重新定位",
    code: null,
  };
  if (!$data.LocationStorage?.code) {
    try {
      uni.showModal({
        content: "小程序申请获取您的地理位置信息用以为您推送最近的服务",
        confirmColor: BasicConfig.MainColor,
        confirmText: "授权",
        success: async (success) => {
          if (success.confirm) {
            await useGetLocationAddress();
          } else {
            useSetLocationStorage(BasicConfig.dfCityCode);
          }
          $data.LocationStorage = useGetLocationStorage();
          $data.cityName = $data.LocationStorage?.name;
          setTimeout(async () => {
            await getData();
          }, 100);
        },
      });
    } catch (error) {}
  } else {
    $data.LocationStorage = useGetLocationStorage();
    $data.cityName = $data.LocationStorage?.name;
    await getData();
  }
};
const init = async () => {
  console.log("首页1~~~~~~~~~~~");
  uni.hideLoading();
  uni.setNavigationBarTitle({
    title: "首页",
  });
  $data.LocationStorage = useGetLocationStorage() || {
    name: "重新定位",
    code: null,
  };
  if (!$data.LocationStorage?.code) {
    try {
      uni.showModal({
        title: "未授权地理位置",
        content:
          "您未授权地理位置，将无法正常获取附近的服务，您可在设置中打开地理位置开关",
        confirmText: "去设置",
        confirmColor: BasicConfig.MainColor,
        success: async (success) => {
          if (success.confirm) {
            await useGetLocationAddress().catch(async (_) => {
              useSetLocationStorage(BasicConfig.dfCityCode);
              $data.LocationStorage = useGetLocationStorage();
              $data.cityName = $data.LocationStorage?.name;
              await getData();
            });
          } else {
            useSetLocationStorage(BasicConfig.dfCityCode);
          }
          $data.LocationStorage = useGetLocationStorage();
          $data.cityName = $data.LocationStorage?.name;
          setTimeout(async () => {
            await getData();
          }, 100);
        },
      });
    } catch (error) {}
  } else {
    $data.LocationStorage = useGetLocationStorage();
    $data.cityName = $data.LocationStorage?.name;
    await getData();
  }
};
const getData = async () => {
  $data.cityName = $data.LocationStorage?.name;
  // 获取首页数据
  await getIndexDatas({ cityCode: $data.LocationStorage?.code })
    .then((res) => {
      if (res.code === errorCode.success) {
        $data.topAreaList = res.data.jingang;
        $data.topAreaList.map((m) => (m._picurl = useImgSrc(m.icon)));
        $data.imgList = res.data.carousel;
        $data.imgList.map((m) => (m._picurl = useImgSrc(m.cover)));
        $data.adImgList = res.data.advertisement;
        $data.adImgList.map((m) => (m._picurl = useImgSrc(m.cover)));
        $data.serviceList = res.data.service;
        $data.serviceList.map((m) => (m._picurl = useImgSrc(m.picurl)));
      }
    })
    .catch((_) => {
      $data.serviceList = [];
    });
};
const jump = (e) => {
  if (!e.path && e.type === "url") return;
  uni.navigateTo({
    url: e.path,
  });
};
const onCheckAddress = () => {
  uni.navigateTo({
    url: "/pages/city/city",
  });
};
const onCheckSearch = () => {
  console.log("onCheckSearch");
};
const onCheckImg = (e) => {
  console.log("onCheckImg", e);
  useClickSwiperImg($data.imgList[e]);
};
const onCheckAdImg = (e) => {
  console.log("onCheckAdImg", e);
  useClickSwiperImg($data.adImgList[e]);
};
/** 点击金刚区 */
const onCheckArea = (e) => {
  useClickArea(e);
};
onLoad((options) => {
  $data.top = getCustomBar() * 2 + "px";
  $data.customBarHeight = getCustomBar() + "px";
});
onShow(() => {
  init();
  console.log("用户信息", useGetUserStorage());
  console.log("用户token", useGetTokenStorage());
});

onReady(async () => {});
onShareAppMessage(() => {
  return {
    path: `/pages/index/index?shareUserId=${userInfo.userId}`,
  };
});
onShareTimeline(() => {
  return {
    path: `/pages/index/index?shareUserId=${userInfo.userId}`,
    query: `userId=${userInfo.userId}`,
  };
});
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(180deg, #ccffff 0%, #ffffff 16%, #f7f8fa 100%);
  width: 100vw;
  min-height: 100vh;
  padding: 0 30rpx 100rpx 30rpx;
  .logo {
    display: flex;
    align-items: center;
    padding-top: v-bind("$data.customBarHeight");
    &_img {
      width: 70rpx;
      height: 70rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    &_title {
      margin-left: 20rpx;
      font-size: 38rpx;
      // font-weight: 700;
    }
  }
  .search {
    // padding: v-bind("$data.customBarHeight") 0rpx 60rpx 0rpx;
    padding: 40rpx 0 60rpx 0;
    display: flex;
    // justify-content: center;
    width: 100%;
    &_box {
      display: flex;
      align-items: center;
      // justify-content: center;
      border: 1px solid #00adad;
      border-radius: 100rpx;
      padding: 20rpx 30rpx;
      width: 100%;
      .city_name {
        border-right: 1px solid #d9d9d9;
        padding-right: 20rpx;
        max-width: 200rpx;
      }
      &--text {
        max-width: 300rpx;
      }
    }
  }
  .top_area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .area_item {
      width: calc(88% / 5);
      margin-bottom: 16rpx;
      &:not(:nth-of-type(5n)) {
        margin-right: 3%;
      }
      &--img {
        width: 100%;
        height: 120rpx;
        // background: green;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 70%;
          max-height: 90%;
        }
      }

      &--name {
        // margin-top: 16rpx;
        font-size: 28rpx;
      }
    }
  }

  .icon_img {
    width: 36rpx;
    height: 36rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
